import { NavBar } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
import './index.scss'
// 里面有各种各样的内置检验规则
import PropTypes from 'prop-types'

function NavHeader({ title, clickHandler }) {
  const navigate = useNavigate()
  // 默认行为，就是返回上一级
  const defaultHandler = () => navigate(-1)

  return (
    <div className="navBar">
      {/* 这里看用户是否需要返回上一级，等待用户传递过来函数，直接在使用 NavHeader 组件的地方通过父传子 传递一个clickHandler函数即可， */}
      {/* 用户不传就默认走 defaultHandler这个函数，即默认行为 */}
      <NavBar back="返回" onBack={clickHandler || defaultHandler}>
        {title}
      </NavBar>
    </div>
  )
}

// 添加props校验，这里propTypes必须这样写
NavHeader.propTypes = {
  title: PropTypes.string.isRequired, // title是字符串，而且是必填的
  clickHandler: PropTypes.func, // clickHandler 是一个函数
}

export default NavHeader
